<template>
  <div class="custom-card">
    <a-card :bordered="false" title="参会者用户信息">
      <div class="attendees-user-info">
        <a-descriptions title="参会者用户信息" :column="1">
          <a-descriptions-item v-if="registrationInfo.approvalStatus == RosterApprovalStatusEnum.APPROVED"
            label="参会者姓名">
            {{ registrationInfo.personName  }}
            {{ registrationInfo.personTel  }}
          </a-descriptions-item>
          <a-descriptions-item label="活动安排">
            <template v-if="registrationInfo.activityArrangeList && registrationInfo.activityArrangeList.length">
              <a-tag color="orange" v-for="(item, index) in registrationInfo.activityArrangeList" :key="index">
                {{ item.name }}
              </a-tag>
            </template>
            <template v-else>--</template>
          </a-descriptions-item>
          <a-descriptions-item label="参会者标签">
            <template v-if="registrationInfo.approvalStatus == RosterApprovalStatusEnum.APPROVED">
              <div v-if="registrationInfo.labelDtoList" class="_mb-10">
                <a-tag color="blue" v-for="(item, index) in registrationInfo.labelDtoList" :key="index">
                  {{ item.labelName }}
                </a-tag>
              </div>
              <div>
                <a-button @click="addTag" size="small"> 添加标签<a-icon type="plus" /> </a-button>
              </div>
            </template>
          </a-descriptions-item>
        </a-descriptions>

        <a-descriptions title="参会者单位信息" :column="1">
          <a-descriptions-item label="所在单位">
            {{ registrationInfo.companyName  }}
          </a-descriptions-item>
          <a-descriptions-item label="单位职务">
            {{ registrationInfo.companyPosition  }}
          </a-descriptions-item>
          <a-descriptions-item v-if="registrationInfo.isCooperation" label="归属组织">
            {{ registrationInfo.orgName  }}
          </a-descriptions-item>
          <a-descriptions-item label="会员身份">
            {{ registrationInfo.memberLevelName  }}
          </a-descriptions-item>
        </a-descriptions>

        <a-descriptions title="签到信息" :column="1">
          <a-descriptions-item label="签到状态">
            {{ signStatusText }}
          </a-descriptions-item>
          <a-descriptions-item label="签到人">
            {{ registrationInfo.replaceSignPersonName  }}
            {{ registrationInfo.replaceSignPersonPhone  }}
          </a-descriptions-item>
          <a-descriptions-item label="签到时间">
            {{ registrationInfo.signTime  }}
          </a-descriptions-item>
          <a-descriptions-item label="签到方式">
            {{ signOperatorAndCheckType  }}
          </a-descriptions-item>
          <a-descriptions-item label="手写签名">
            <viewer v-if="registrationInfo.signImg" class="viewer" ref="viewer" :images="[registrationInfo.signImg]">
              <img :src="registrationInfo.signImg" alt="" class="viewer-img" style="width: 80px;" />
            </viewer>
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-card>
    <SetLabel v-if="activityId" ref="setLabel" :activityId="activityId" :isBranch="false"
      :selectedRows="[{ id: registrationInfo.registerId, labelIds }]" :label_list="label_list"
      @refreshLabel="getLabelList" @branchLabelAddSuccess="refresh" @resetCheckedRows="resetCheckedRows"></SetLabel>
  </div>
</template>

<script>
import SetLabel from '@/views/activity/components/userTags/setLabel.vue'
import { getActivityLabelList } from '@/api/activity/activity'
import { RosterApprovalStatusEnum, RegisterTypeEnum, signStatusEnum, signTypeEnum } from '@/enums/activity.js'
// 参会者用户信息
export default {
  components: {
    SetLabel
  },
  props: {
    registrationInfo: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    signOperatorAndCheckType() {
      const checkType = this.Dict.getLocal('CheckTypeEnumDict').find(
        item => item.dictValue == this.registrationInfo.signType
      )
      if (!checkType) return ''
      return checkType.dictLabel
    },
    labelIds() {
      if (!this.registrationInfo.labelDtoList) return ''
      return this.registrationInfo.labelDtoList.map(item => item.labelId).join(',')
    },
    signStatusText() {
      const signStatus = this.Dict.getLocal('SignStatusEnumDict').find(
        item => item.dictValue == this.registrationInfo.signStatus
      )
      if (signStatus) return signStatus.dictLabel
      return ''
    }
  },
  data() {
    return {
      RosterApprovalStatusEnum,
      RegisterTypeEnum,
      signTypeEnum,
      signStatusEnum,
      label_list: [],
      activityId: undefined
    }
  },
  mounted() {
    this.activityId = this.$route.query.activityId
    this.getLabelList()
  },
  methods: {
    //获取标签列表
    async getLabelList() {
      let res = await getActivityLabelList(this.activityId)
      this.label_list = res.data || []
    },
    refresh() {
      this.$emit('success')
    },
    resetCheckedRows(p) {
      console.log(p)
    },
    addTag() {
      this.$refs.setLabel.moduleShow()
    }
  }
}
</script>
<style lang="less" scoped>
.attendees-user-info {
  background: #f7f8fa;
  padding: 20px;
  display: flex;

  ::v-deep .ant-descriptions-row>td {
    display: flex;
  }
}
</style>
